<template>
  <div class="m-4">
    <p>Child options expand when hovered</p>
    <el-cascader
      v-model="value"
      :options="options"
      :props="props"
      @change="handleChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getTagGetAll } from '@/servers/controller'
import { ElMessage } from 'element-plus'

const value = ref([])

const props = {
  expandTrigger: 'hover' as const,
  value: 'id',
  label: 'name',
}

const loadTags = async () => {
  const res = await getTagGetAll()
  if (res.data.code === 200) {
    options.value = res.data.data
    console.log('获取全部标签成功')
  } else {
    ElMessage.error('获取全部标签失败')
  }
}

const handleChange = (value: any) => {
  console.log(value)
}

const options = ref([
  {
    value: 'component',
    label: 'Component',
    // children: [
    //   {
    //     value: 'basic',
    //     label: 'Basic',
    //     children: [
    //       {
    //         value: 'layout',
    //         label: 'Layout',
    //       },
    //       {
    //         value: 'color',
    //         label: 'Color',
    //       },
    //       {
    //         value: 'typography',
    //         label: 'Typography',
    //       },
    //       {
    //         value: 'icon',
    //         label: 'Icon',
    //       },
    //       {
    //         value: 'button',
    //         label: 'Button',
    //       },
    //     ],
    //   },
    //   {
    //     value: 'form',
    //     label: 'Form',
    //     children: [
    //       {
    //         value: 'radio',
    //         label: 'Radio',
    //       },
    //       {
    //         value: 'checkbox',
    //         label: 'Checkbox',
    //       },
    //       {
    //         value: 'input',
    //         label: 'Input',
    //       },
    //       {
    //         value: 'input-number',
    //         label: 'InputNumber',
    //       },
    //       {
    //         value: 'select',
    //         label: 'Select',
    //       },
    //       {
    //         value: 'cascader',
    //         label: 'Cascader',
    //       },
    //       {
    //         value: 'switch',
    //         label: 'Switch',
    //       },
    //       {
    //         value: 'slider',
    //         label: 'Slider',
    //       },
    //       {
    //         value: 'time-picker',
    //         label: 'TimePicker',
    //       },
    //       {
    //         value: 'date-picker',
    //         label: 'DatePicker',
    //       },
    //       {
    //         value: 'datetime-picker',
    //         label: 'DateTimePicker',
    //       },
    //       {
    //         value: 'upload',
    //         label: 'Upload',
    //       },
    //       {
    //         value: 'rate',
    //         label: 'Rate',
    //       },
    //       {
    //         value: 'form',
    //         label: 'Form',
    //       },
    //     ],
    //   },
    //   {
    //     value: 'data',
    //     label: 'Data',
    //     children: [
    //       {
    //         value: 'table',
    //         label: 'Table',
    //       },
    //       {
    //         value: 'tag',
    //         label: 'Tag',
    //       },
    //       {
    //         value: 'progress',
    //         label: 'Progress',
    //       },
    //       {
    //         value: 'tree',
    //         label: 'Tree',
    //       },
    //       {
    //         value: 'pagination',
    //         label: 'Pagination',
    //       },
    //       {
    //         value: 'badge',
    //         label: 'Badge',
    //       },
    //     ],
    //   },
    //   {
    //     value: 'notice',
    //     label: 'Notice',
    //     children: [
    //       {
    //         value: 'alert',
    //         label: 'Alert',
    //       },
    //       {
    //         value: 'loading',
    //         label: 'Loading',
    //       },
    //       {
    //         value: 'message',
    //         label: 'Message',
    //       },
    //       {
    //         value: 'message-box',
    //         label: 'MessageBox',
    //       },
    //       {
    //         value: 'notification',
    //         label: 'Notification',
    //       },
    //     ],
    //   },
    //   {
    //     value: 'navigation',
    //     label: 'Navigation',
    //     children: [
    //       {
    //         value: 'menu',
    //         label: 'Menu',
    //       },
    //       {
    //         value: 'tabs',
    //         label: 'Tabs',
    //       },
    //       {
    //         value: 'breadcrumb',
    //         label: 'Breadcrumb',
    //       },
    //       {
    //         value: 'dropdown',
    //         label: 'Dropdown',
    //       },
    //       {
    //         value: 'steps',
    //         label: 'Steps',
    //       },
    //     ],
    //   },
    //   {
    //     value: 'others',
    //     label: 'Others',
    //     children: [
    //       {
    //         value: 'dialog',
    //         label: 'Dialog',
    //       },
    //       {
    //         value: 'tooltip',
    //         label: 'Tooltip',
    //       },
    //       {
    //         value: 'popover',
    //         label: 'Popover',
    //       },
    //       {
    //         value: 'card',
    //         label: 'Card',
    //       },
    //       {
    //         value: 'carousel',
    //         label: 'Carousel',
    //       },
    //       {
    //         value: 'collapse',
    //         label: 'Collapse',
    //       },
    //     ],
    //   },
    // ],
    children: [
      {
        id: 2,
        name: '后端开发',
        sort: 1,
        level: 2,
        parentId: 1,
        status: 1,
        createTime: '2024-03-27 21:32:09',
        children: [
          {
            id: 3,
            name: 'Java',
            sort: 1,
            level: 3,
            parentId: 2,
            status: 1,
            createTime: '2024-03-27 21:32:25',
            children: [],
          },
        ],
      },
    ],
  },
])

onMounted(() => {
  loadTags()
})
</script>

<style scoped lang="scss"></style>
